<template>
	<!-- 搜索中间层界面 -->
	<view class="search-view">

		<view class="serach-input">
			<view class="input-box">
				<text class="iconfont search">&#xe62e;</text>
				<text @click="onCuowu()" class="iconfont error">&#xe618;</text>
				<input type="text" v-model="searchText" placeholder="猫粮" placeholder-class="place-input" @confirm="searchStart()" />
				<button type="primary" @click="searchStart()">搜索</button>
			</view>
		</view>

		<!-- 搜索历史 -->
		<view class="history">
			<text class="text1">搜索历史</text>
			<text class="iconfont" v-if="isLogin" @click="delhistory">&#xe66b;</text>
		</view>
		<view class="history-box">
			<view class="box-item" v-for="(item,index) in sList" :key="index" @click="keywordsClick(item)">
				{{item}}
			</view>
			
		</view>
		

	</view>
</template>

<script>
	import {mapState,mapMutations} from "vuex";
	export default {
		data() {
			return {
				searchText: '',
				hList: [],
				isLogin: false, // 是否登录
			};
		},
		onLoad() {
			let token = uni.getStorageSync('lph-token');
			if(token){
				this.isLogin = true;
				this.getSearchHistory();
			}
			
			
		},
		
		computed:{
			...mapState(['sList'])
		},
		methods: {
			...mapMutations(['changeSList','delSList']),
			async onsearch() { // 搜索
				let a = {
					proname: this.searchText,
					lng: '114.121224',
					lat: '22.627038'
				}
				let content =  await this.$http.searchProduct(a);
				if (content.code == 200) {
						this.getSearchHistory();
				}
			},
			async getSearchHistory() { // 获取搜索历史
			if(isLogin) {
				let a = await this.$http.getSearchHistory();
				this.changeSList(a.data);
			}
				
			},
			async delhistory() { //清空历史记录
				let a = await this.$http.delSearchHistory();
				if(a.code == 200) {
					uni.showToast({
						title: '搜索历史清空成功',
						icon: 'none'
					})
					this.delSList();
				}
			},
			keywordsClick(item){ // 推荐搜索
				uni.navigateTo({
					url: `/pages/index/searchResult?searchText=${item}`
				});
			},
			searchStart() { //触发搜索
				uni.hideKeyboard();
				uni.navigateTo({
					url: `/pages/index/searchResult?searchText=${this.searchText}`
				});
				return
				
				let _this = this;
				if (_this.searchText == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 1000
					});
					return false;
				} else {
					uni.hideKeyboard();
					
					uni.getStorage({
						key: 'search_cache',
						success:(res) => {
							let list = res.data;
							if (list.length > 5) {
								uni.navigateTo({
									url: `/pages/index/searchResult?searchText=${_this.searchText}`
								});
								for (let item of list) {
									if (item == _this.searchText) {
										return false;
									}
								}
								list.pop();
								list.unshift(_this.searchText);
								
							} else {
								uni.navigateTo({
									url: `/pages/index/searchResult?searchText=${_this.searchText}`
								});	
								for (let item of list) {
									if (item == _this.searchText) {
										return false;
									}
								}
								list.unshift(_this.searchText);
							}
							_this.hList = list;
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						},
						fail() {
							_this.hList = [];
							_this.hList.push(_this.searchText);
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						}
					})
				}
				this.searchText = '';
			},
			// 点击删除按钮
			onCuowu() {
				this.searchText = ''
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/doenCommon.scss';
</style>
